<template>
  <div>
    <div>
      <FormPanel ref="formPanel" :list="formList" :cols="3" labelWidth="100" :isSubmitBtn="false" @formChange="formchangeFun" />
      <ButtonArea :style="{ paddingLeft: '300px' }">
        <el-button type="primary" @click="FormPanelSeacher">搜 索</el-button>
        <el-button @click="FormPanelreset">重置</el-button>
      </ButtonArea>
      <FilterTable
        ref="customerTable"
        :columns="columnsList"
        columnsRef="partPartOutboundInternalReceiveSearchReceiptorPage"
        :fetchapi="getTableData"
        :params="fetchParams"
        :datakey="'rows'"
        :onColumnsChange="columns => (this.columns = columns)"
        :height="'200'"
        selectionType="single"
        :onRowSelectChange="selectRow"
      ></FilterTable>
    </div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDialog(1)">取 消</el-button>
      <el-button type="primary" @click="closeDialog(2)">确 认</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';

export default {
  name: 'searchInOrderPage',
  mixins: [dictionary],
  props: ['pickerId'],
  data() {
    return {
      formList: this.createFormList(),
      columnsList: this.createTableColumns(),
      getTableData: {},
      selectRowData: {},
      fetchParams: {
        customerCode: this.pickerId,
        xhrAbort: false
      }
    };
  },
  created() {
    this.getlist();
  },
  mounted() {
    this.formList[0].initialValue = this.pickerId;
  },
  methods: {
    createFormList() {
      return [
        { type: 'INPUT', label: '领料人代码', fieldName: 'pickerId', disabled: false },
        { type: 'INPUT', label: '领料人名称', fieldName: 'pickerName', disabled: false }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        { title: '领料人代码', dataIndex: 'EMPLOYEE_NO', sorter: true, filter: true, filterType: 'input' },
        { title: '领料人名称', dataIndex: 'EMPLOYEE_NAME', sorter: true, filter: true, filterType: 'input' }
      ];
    },
    // 重置
    FormPanelreset() {
      this.$refs.formPanel.RESET_FORM();
    },
    FormPanelSeacher() {
      this.$refs.formPanel.SUBMIT_FORM();
    },
    formchangeFun(val) {
      this.fetchParams = Object.assign({}, this.fetchParams, val, { xhrAbort: false });
    },
    selectRow(row) {
      console.log(row);
      this.selectRowData = row;
    },
    confirmFun() {},
    closeDialog(param) {
      // debugger;
      if (param == 1) {
        this.$emit('close', false, param);
      } else {
        if (!this.selectRowData.length) {
          return this.closeDialog(1);
        }
        this.$emit('addReceiptor', this.selectRowData);
        this.closeDialog(1);
      }
    }
  }
};
</script>

<style lang="less" scoped></style>
